<template>
  <h2>Child子级组件</h2>
  <h4>msg: {{ msg }}</h4>
  <button @click="update">更新数据</button>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
export default defineComponent({
  name: "Child",

  // vue2.x中的生命周期钩子
  beforeCreate() {
    console.log("2.x中的beforeCreate");
  },
  created() {
    console.log("2.x中的created");
  },

  beforeMount() {
    console.log("2.x中的beforeMount");
  },
  mounted() {
    console.log("2.x中的mounted");
  },

  beforeUpdate() {
    console.log("2.x中的beforeUpdate");
  },
  updated() {
    console.log("2.x中的updated");
  },

  // vue2.x中的beforeDestroy和destroyed在vue3中改名，不能再使用了
  //   beforeDestroy() {
  beforeUnmount() {
    console.log("2.x中的beforeDestroy");
  },
  //   destroyed() {
  unmounted() {
    console.log("2.x中的destroyed");
  },

  setup() {
    console.log("3.0中的setup");

    const msg = ref("abc");
    // 按钮点击事件的回调
    const update = () => (msg.value += "----");

    onBeforeMount(() => {
      console.log("3.0中的onBeforeMount");
    });
    onMounted(() => {
      console.log("3.0中的onMounted");
    });
    onBeforeUpdate(() => {
      console.log("3.0中的onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("3.0中的onUpdated");
    });
    onBeforeUnmount(() => {
      console.log("3.0中的onBeforeUnmount");
    });
    onUnmounted(() => {
      console.log("3.0中的onUnmounted");
    });
    return {
      msg,
      update,
    };
  },
});
</script>